<template>
  <!-- 最外围盒子 -->
  <view class="userControl-container">
    <!-- 搜索添加用户盒子 -->
    <addAndSearch addPageTitle="添加用户"></addAndSearch>

    <view class="popUp">
      <!-- 搜索弹出层 -->
      <popUp popUpType="userControl"></popUp>
    </view>
    <!-- 用户列表 -->
    <u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"
      v-if="this.$store.getters.totalList.length == 0">
    </u-empty>
    <view class="list">
      <u-list @scrolltolower="scrolltolower" lowerThreshold="1">
        <u-list-item v-for="(item, index) in totalList" :key="index">
          <u-cell :title="`用户名称:${item.userName} `" :label="`联系电话:${item.phonenumber}`" value="详情" isLink
            @click="userInfo(`${index + 1}`)">
            <u-avatar slot="icon" shape="square" size="35" :src="item.url"
              customStyle="margin: -3px 5px -3px 0"></u-avatar>
          </u-cell>
        </u-list-item>
      </u-list>
    </view>
  </view>
</template>

<script>
import { listUser } from "@/api/system/user";
import { addDateRange } from "@/utils/ruoyi";
export default {
  data() {
    return {
      // 用户列表初始值
      userList: null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
      },
      // 日期范围
      dateRange: this.$store.getters.dateRange,
      // 请求列表
      localTotalList: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 点击查看用户详情 */
    userInfo(userId) {
      this.$tab.navigateTo(
        `/pages/work/userControl/CorU-User/index?title=用户修改&userId=${userId}`
      );
    },
    /** 查询用户列表 */
    async getList() {
      const response = await listUser(
        addDateRange(this.queryParams, this.dateRange)
      );
      this.userList = response.rows;
      this.total = response.total;
      if (this.queryParams.pageNum == 1) {
        this.localTotalList = this.userList
        this.$store.commit("syncGetList", this.userList);
        this.queryParams.pageNum++;
      }
    },
    // 滚动条滚动触发总事件
    scrolltolower() {
      this.loadmore();
      this.queryParams.pageNum++;
    },
    // 滚动触发事子事件(下滑加载更多)
    async loadmore() {
      if (this.localTotalList.length < this.total) {
        await this.getList();
        this.localTotalList = [...this.localTotalList, ...this.userList];
        this.$store.commit("syncGetList", this.localTotalList);
        return;
      }
      uni.showToast({ title: "到底了,没有更多了", icon: "none" });
    },
  },
  computed: {
    totalList() {
      return this.$store.getters.totalList
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/yangLaoAppStyle.scss";

.userControl-container {
  background-color: #fff;
  overflow: hidden;
}
</style>
